<template>
	<view>
		<u-popup :show="show" mode="bottom" :round="10" @close="close">
			<view class="px-32 py-40">
				<view class="flex items-center justify-between">
					<view class="">
						<view class="" v-if="multiple" @click="multiple = false">
							取消
						</view>
						<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/icon_jiantou@3x.png"
							class="image-48" mode="" v-else @click="close"></image>
					</view>

					<view class="">
						选择提醒的人
					</view>

					<view class="">
						<view class="finish-btn" v-if="multiple" @click="$modal.throttle(confirm(),2000)">
							完成
						</view>
						<view class="" v-else @click="multiple = true">
							多选
						</view>
					</view>

				</view>

				<view class="p-16 mt-32" style="background-color: #DEDEDE;">
					<view class="flex items-center" v-if="inputShow || keyword != ''">


						<u--input border="none" clearable v-model="keyword" :focus="inputShow"
							@blur="inputShow = false"></u--input>
					</view>

					<div class="flex justify-around" v-if="!inputShow && keyword == ''" @click="handleInputShow">
						<view class="flex items-center">
							<u-icon name="search" :bold="true" color="#999999" size="18"></u-icon>
							<view class="text-32 ml-12" style="color: #999;">
								搜索
							</view>
						</view>
					</div>

				</view>


				<scroll-view style="height: 680rpx;" scroll-y>
					<div class="flex items-center justify-around" v-for="(item,index) in computedUserList"
						:key="item.id">
						<view class="mr-20" v-if="multiple">
							<checkbox-group @change="selectUser(item)">
								<checkbox :checked="item.checked" />
							</checkbox-group>
						</view>

						<view class="flex items-center w-full" @click="handleOneUser(item)">
							<image :src="item.userInfo.avatar" class="image-80 round-4" mode=""></image>
							<div class="ml-20" style="flex: 1;">
								<view class="py-48">
									{{item.nickName}}
								</view>
								<div class="line"></div>
							</div>
						</view>
					</div>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "SelectGroupListUser",
		props: {
			show: {
				type: Boolean,
				require: true
			},
			isGroupLeader:{
				require: true
			}
		},
		data() {
			return {
				inputShow: false,
				keyword: "",
				userList: [],
				multiple: false,
				userInfo:this.$store.getters.userInfo
			};
		},
		computed: {
			computedUserList() {
				return this.userList.filter((item => {
					return item.nickName.indexOf(this.keyword) != -1
				}))
			}
		},
		methods: {
			handleOneUser(item) {
				if(!this.multiple){
					this.$emit('confirm', {
						type:1,
						data:item
					})
				}
			},
			confirm() {
				if(this.multiple){
					this.$emit('confirm', {
						type: 2,
						data: this.computedUserList.filter(item => {
							return item.checked
						})
					})
				}
			},
			selectUser(item) {
				item.checked = !item.checked
			},
			async getData(groupId) {
				const res = await this.$Api.chat.groupUserList({
					groupId
				})

				this.userList = res.rows.filter(item=>{
					return item.userId != this.userInfo.userId
				}).map(item => {
					return {
						...item,
						checked: false
					}
				})
				
				if(this.isGroupLeader){
					this.userList.unshift({
						checked: false,
						userId:0,
						nickName:"所有人",
						userInfo:{
							avatar:'http://api.fceos.cn/qiliaoyun/profile/appImages/icon_qunliao@3x.png'
						}
					})
				}
			},
			close() {
				this.$emit('close')
			},
			handleInputShow() {
				this.inputShow = true
			}
		}
	}
</script>

<style lang="scss">
	.line {
		height: 2rpx;
		background-color: #F6F6F6;
	}

	/deep/ .uni-checkbox-input-checked {
		background-color: #000000 !important;
	}

	.finish-btn {
		background-color: #3998FB;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
		color: #FFF;
	}
</style>